<template>
  <div>
    <div class="weui_tab">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#fff"
        text-color="#303133"
        active-text-color="#16b0ff">
        <div class="weui_navbar">
          <el-menu-item index="1" class="weui_navbar_item " @click="showProject">项目</el-menu-item>
          <el-menu-item index="2" class="weui_navbar_item " @click="showTask">课题</el-menu-item>
          <el-menu-item index="3" class="weui_navbar_item " @click="showGain">学生成果</el-menu-item>
        </div>
      </el-menu>
    </div>
    <check-project v-if="Project" class="projectMargin" ></check-project>
    <check-task v-if="Task" class="taskMargin"></check-task>
    <check-gains class="taskMargin" v-if="Gain"></check-gains>
  </div>
</template>

<script>
// import CheckProject from './checkProject'
import CheckProject from './list'
import CheckTask from './PRHeaderComponents/checkTask'
import CheckGains from './PRHeaderComponents/checkGains'

export default {
  name: 'moduleHeader',
  components: {
    CheckProject,
    CheckTask,
    CheckGains
  },
  props: {
    project: Object
  },
  data () {
    return {
      activeIndex: '1',
      Project: '',
      Task: '',
      Gain: ''
    }
  },
  mounted: function () {
    this.Project = true
    let activeMenu = parseInt(sessionStorage.getItem('activeMenu'))
    if (activeMenu === 2) {
      this.activeIndex = 2
      this.Task = false
      this.Task = true
      this.Project = false
      this.Gain = false
    } else if (activeMenu === 3) {
      this.activeIndex = 3
      this.Project = false
      this.Gain = false
      this.Gain = true
      this.Task = false
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    showProject () {
      this.Project = true
      this.Gain = false
      this.Task = false
    },
    showTask () {
      this.Task = false
      this.Task = true
      this.Project = false
      this.Gain = false
    },
    showGain () {
      this.Project = false
      this.Gain = false
      this.Gain = true
      this.Task = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .tabColor
    color #16b0ff
  .projectMargin
    margin-top 62px
  .taskMargin
    margin-top 65px
</style>
